<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="会议人数">
        <el-select
          v-model="queryParams.q"
          placeholder="请选择"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in option"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="会议类型">
        <el-select
          v-model="queryParams.w"
          placeholder="请选择"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in option"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="会议室功能">
        <el-select
          v-model="queryParams.e"
          placeholder="请选择"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in option"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20" type="flex" justify="space-around">
      <el-col :span="6">
        <div class="grid-content">
          <div class="wrap">
            <div class="main">视频会议</div>
            <div class="main">可培训</div>
            <div class="main">电子版</div>
          </div>
          <div class="blod">3楼小会议室</div>
          <div style="margin-top: 20px;"><i class="el-icon-user"></i> 可容纳人数：2</div>
          <div style="margin-top: 10px;"><i class="el-icon-location-outline"></i> 会议室位置：的撒发顺丰</div>
        </div>
      </el-col>
      <el-col :span="6"><div class="grid-content"></div></el-col>
      <el-col :span="6"><div class="grid-content"></div></el-col>
      <el-col :span="6"><div class="grid-content"></div></el-col>
    </el-row>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 总条数
      total: 4,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 4,
        q: '',
        w: '',
        e: ''
      },
      // 下拉数据
      option: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 数据
    getList() {

    },
    // 搜索
    handleQuery() {

    },
    // 重置
    resetQuery() {

    }
  }
};
</script>
<style scoped lang="scss">
.grid-content {
  width: 250px;
  height: 200px;
  box-shadow: 1px 1px 2px #333;
  margin: auto;
  font-size: 12px;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  justify-content: left;
  .blod {
    font-size: 20px;
    font-weight: bold;
  }
  .wrap {
    display: flex;
    margin-bottom: 20px;
    .main {
      padding: 4px 8px;
      background: #46a6ff5c;
      color: #46a6ff;
      margin-right: 10px;
      border-radius: 5px;
    }
  }
}
</style>